<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="f" uri="http://www.sctv.com/tags/form" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<style>
    td{
        word-break: break-all;
        /*wordw*/
    }
</style>
<script>
  var idsdata={};
  var relateNews='${relateNews}';
  if(relateNews!=null && relateNews!=""){
    idsdata=JSON.parse(relateNews);
  }
  var now=1;
  var big=0;
  var size=10;
  //上一页
  function pre(){
    now=now==1?1:now-1
    initgrid(now,size);
  }
  //下一页
 function next(){
   now=now==big?big:now+1
   initgrid(now,size);
 }
 //查询方法
 function  searchRelatednews() {
   now=1;
   initgrid(now,size);
 }

  //查看已选
  function  choiceInfo() {
    now=1;
    $.ajax({
      url: "/cmscp/ext/info/getChoiceRelatednews.do",
      data: {'idsdata':JSON.stringify(idsdata),page:now,page_size:size},
      type: "POST",
      success: function (data) {
        var html = "";
        var lists = data.content;
        <%--<td><input type="checkbox" name="ids" value="${bean.id}"/></td>--%>
        for (var v = 0; v < lists.length; v++) {
          html += '<tr ondblclick="getClick(this)"><td style="display: none">'+JSON.stringify(lists[v])+'<td><input type="checkbox" name="ids" value="'+lists[v].id+'"/></td><td><span style="color: red;width: 50px;">(已选'+(v+1)+')</span>'+lists[v].id+'</td><td>'+lists[v].title+'</td><td><input id="s'+lists[v].id+'" type="text" style="width: 60px;" value="'+lists[v].sort+'"/></td><td>'+lists[v].publishDate+'</td><td>'+lists[v].priority+'</td><td align="center">'+lists[v].nodeName+'</td><td align="center"><button class="btn btn-default btn-sm" type="button" style="font-size: 14px;margin-right: 10px;" onclick="okChoiceClick('+lists[v].id+')">确定</button><button class="btn btn-default btn-sm" type="button" style="font-size: 14px;" onclick="clearClick('+lists[v].id+')">清除</button></td></tr>';
        }
        $("#bodyContent").html(html);
//        $("#totalCount").html(data.totalElements);
//        big=data.totalPages;
//        $("#now").html(currtPage);
      }
    });
    $("#pagediv").hide();
    $("#pageul").hide();
    $("#mulSelect").hide();
    $("#backBtn").show();
  }

  //更改页码
    function changePage(tempSize){
      size=tempSize;
      initgrid(1,size);
    }
  function initgrid(currtPage,pageSize) {
    var nameStr=$("#name").val();
    var startTimeStr=$("#startTime").val();
    var endTimeStr=$("#endTime").val();
    var nickNameStr=$("#nickName").val();
    $.ajax({
      url: "/cmscp/ext/info/getRelatednews.do",
      data: {title:nameStr,startTime:startTimeStr, endTime:endTimeStr,nickName:nickNameStr,page:currtPage,page_size:pageSize,infoId:'${infoId}','idsdata':JSON.stringify(idsdata)},
      type: "POST",
      success: function (data) {
        var html = "";
        var lists = data.content;
        <%--<td><input type="checkbox" name="ids" value="${bean.id}"/></td>--%>
        for (var v = 0; v < lists.length; v++) {
            html += '<tr><td style="display: none">'+JSON.stringify(lists[v])+'<td><input type="checkbox" name="ids" value="'+lists[v].id+'"/></td><td>'+lists[v].id+'</td><td>'+lists[v].title+'</td><td><input id="s'+lists[v].id+'" type="text" style="width: 60px;" value="0"/></td><td>'+lists[v].publishDate+'</td><td>'+lists[v].priority+'</td><td>'+lists[v].nodeName+'</td><td align="center"><button class="btn btn-default btn-sm" type="button" style="font-size: 14px;" onclick="okClick('+lists[v].id+',\''+lists[v].name+'\')">确定</button></td></tr>';
        }
        $("#bodyContent").html(html);
        $("#totalCount").html(data.totalElements);
        big=data.totalPages;
        $("#now").html(currtPage);
      }
    });
    console.log(currtPage,pageSize);
    $("#pagediv").show();
    $("#pageul").show();
    $("#mulSelect").show();
    $("#backBtn").hide();

  }

  function okClick(id,name){
    var sort=$("#s"+id).val();
    if(getJsonLength(idsdata)>=10){
      alert("请勿超过10条！");
      return;
    }
    var r = new RegExp("^(\\d|[1-9]\\d|100)$");　　//0-100整数
    if (!r.test(sort)) {
      alert("顺序，请输入数字0~100（整数）！");
      return;
    }
    idsdata[id]=sort;
    alert("添加成功！");
    searchRelatednews();
  }
  function okChoiceClick(id){
    var sort=$("#s"+id).val();
    var r = new RegExp("^(\\d|[1-9]\\d|100)$");　　//0-100整数
    if (!r.test(sort)) {
      alert("顺序，请输入数字0~100（整数）！");
      return;
    }
    idsdata[id]=sort;
    choiceInfo();
  }
  function clearClick(id){
    delete idsdata[id];
    choiceInfo();
  }

  //多选按钮
  <%--function finishMultipleChoiceInfo() {--%>
    <%--if(Cms.checkeds("ids")==0) {--%>
      <%--alert("<s:message code='pleaseSelectRecord'/>");--%>
      <%--return false;--%>
    <%--}--%>
    <%--var flag=true;--%>
    <%--$.each($('input:checkbox:checked'),function(){--%>
      <%--if($(this).val()!="on" && $(this).val()!=""){--%>
        <%--var infoId=$(this).val();--%>
        <%--var sort=$("#s"+infoId).val();--%>
        <%--var r = new RegExp("^(\\d|[1-9]\\d|100)$");　　//0-100整数--%>
        <%--if (!r.test(sort)) {--%>
          <%--alert("顺序，请输入数字0~100（整数）！");--%>
          <%--flag=false;--%>
          <%--return false;--%>
        <%--}--%>
        <%--idsdata[infoId]=sort;--%>
      <%--}--%>
      <%--this.checked=!this.checked;--%>

    <%--});--%>
    <%--if(!flag){--%>
      <%--return;--%>
    <%--}--%>
    <%--choiceInfo();--%>
  <%--}--%>




  //多选按钮
  function multipleChoiceInfo() {
    if(Cms.checkeds("ids")==0) {
      alert("<s:message code='pleaseSelectRecord'/>");
      return false;
    }
    if(Cms.checkeds("ids")>10) {
      alert("请勿超过10条！");
      return false;
    }

    if(10-getJsonLength(idsdata)<Cms.checkeds("ids")){
      alert("请勿超过10条！");
      return;
    }
//    var infoIds="";
    var flag=true;
    $.each($('input:checkbox:checked'),function(){
        if($(this).val()!="on" && $(this).val()!=""){
//          infoIds=infoIds+$(this).val()+",";
          var infoId=$(this).val();
          var sort=$("#s"+infoId).val();
          var r = new RegExp("^(\\d|[1-9]\\d|100)$");　　//0-100整数
          if (!r.test(sort)) {
            alert("顺序，请输入数字0~100（整数）！");
            flag=false;
            return false;
          }
          idsdata[infoId]=sort;
        }
        this.checked=!this.checked;

    });
    //遍历map
//    for(var prop in idsdata){
//      if(idsdata.hasOwnProperty(prop)){
//        console.log('key is ' + prop +' and value is' + idsdata[prop]);
//      }
//    }

//    if(infoIds!="" && infoIds.length>0){
//      infoIds=infoIds.substring(0,infoIds.length-1);
//    }
//    alert("infoIds:"+infoIds);
    if(!flag){
      return;
    }
    alert("添加成功！");
    searchRelatednews();
//    f7OnClick(id,name);
//    $("#f7_ok1").click();
  }
  function saveAndClose() {
    if(getJsonLength(idsdata)>10){
       alert("请勿超过10条！");
       return;
    }
    f7OnClick(JSON.stringify(idsdata),getJsonLength(idsdata));
    $("#f7_ok1").click();
  }

  function getJsonLength(jsonData){

    var jsonLength = 0;

    for(var item in jsonData){

      jsonLength++;

    }

    return jsonLength;

  }

  initgrid(1,10);


</script>
<div class="box-body table-responsive">
    <form id="searchForm" action="/cmscp/ext/info/getRelatednews.do" method="get" class="form-inline ls-search">
        <div class="form-group">
            <label for="name">标题</label>
            <input class="form-control input-sm" type="text" id="name" name="name" value="" style="width:600px;"/>
        </div>
        <div class="form-group" >
            <label for="startTime"><s:message code="beginTime"/></label>
            <input class="form-control input-sm" type="text" id="startTime" name="startTime" value="" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'});" style="width:120px;"/>
        </div>
        <div class="form-group" >
            <label for="endTime"><s:message code="endTime"/></label>
            <input class="form-control input-sm" type="text" id="endTime" name="endTime" value="" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'});" style="width:120px;"/>
        </div>

        <button class="btn btn-default btn-sm" type="button" style="font-size: 14px;" onclick="searchRelatednews()">查询</button>
    </form>
    <span style="color: red">提示:勾选后点击'多选确定“按钮” 或者“确定”按钮,最后选择完后，记得点击“保存并离开”按钮,最多保存10条相关新闻</span><br>
    <button class="btn btn-default btn-sm" type="button" style="font-size: 14px;margin-top: 10px;" onclick="multipleChoiceInfo()" id="mulSelect">多选确定</button>
    <button class="btn btn-default btn-sm" type="button" style="font-size: 14px;margin-left: 14px;margin-top: 10px;" onclick="choiceInfo()">查看已选</button>
    <button class="btn btn-default btn-sm" type="button" style="font-size: 14px;margin-left: 14px;margin-top: 10px;" onclick="saveAndClose()">保存并离开</button>
    <button class="btn btn-default btn-sm" id="backBtn" type="button" style="font-size: 14px;margin-left: 14px;margin-top: 10px;" onclick="searchRelatednews()">返回选择相关新闻</button>

    <form method="post" style="margin-top: 20px;">
        <tags:search_params/>


        <table id="pagedTable" style="table-layout: fixed" class="table table-condensed table-bordered table-hover ls-tb">
            <thead id="sortHead" >
            <tr class="ls_table_th">
                <th width="30px;"><input type="checkbox" onclick="Cms.check('ids',this.checked);"/></th>
                <th class="ls-th-sort" width="150px;"><span class="ls-sort" pagesort="id">ID</span></th>
                <th>标题</th>
                <th width="80px;">顺序</th>
                <th width="180px;">发布时间</th>
                <th width="50px;">优先级</th>
                <th width="120px;">栏目</th>
                <th width="130px;">操作</th>
            </tr>
            </thead>
            <tbody id="bodyContent">

            </tbody>
        </table>
    </form>
    <div class="pull-right" style="padding:0 6px;" id="pagediv">
        &nbsp;每页
        <select class="form-control" id="pageSize" onchange="changePage($(this).val())" style="border-radius:4px;padding-left:3px;padding-right:3px;width:60px;display:inline-block;">
            <option>10</option>
            <option>20</option>
            <option>50</option>
            <option>100</option>
            <option>200</option>
            <option>400</option>
            <option>800</option>
        </select>
        条 &nbsp; 共<span id="totalCount"></span>  条
    </div>
    <ul class="pagination pull-right" style="margin:0;" id="pageul">
        <li>
            <a href="javascript:;"  id="pre" onclick="pre()"  aria-label="上一页">
                <span aria-hidden="true">«</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <span id="now">5</span>
            </a>
        </li>
        <li>
            <a href="javascript:;" id="next" onclick="next()" aria-label="下一页">
                <span aria-hidden="true">»</span>
            </a>
        </li>
    </ul>
</div>
</tbody>
</table>